<template>
    <div>
        <template v-for="(item, index) in menuList">
            <div style="text-align: center;" :key="index">

                <Dropdown transfer v-if="item.children.length !== 1" placement="right-start" :key="index" @on-click="changeMenu">
                    <Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
                        <c-icon
                            :name="getIconName(item,activeRoute)"
                            align="middle"
                            className="icon-large"
                            :key="item.icon"></c-icon>
                    </Button>
                    <DropdownMenu style="width: 200px;" slot="list">
                        <template v-for="(child, i) in item.children">
                            <DropdownItem :name="child.name" :key="i">
                                <i :class="[  'icon','iconfont',child.icon ]" :style="{ color:iconColor}"></i>
                                <span style="padding-left:10px;">{{ itemTitle(child) }}</span>
                                </DropdownItem>
                        </template>
                    </DropdownMenu>
                </Dropdown>

                <Dropdown transfer v-else placement="right-start" :key="index" @on-click="changeMenu">

                    <Button @click="changeMenu(item.children[0].name)" style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
                        <c-icon
                            :name="getIconName(item,activeRoute)"
                            align="middle"
                            className="icon-large"
                            :key="item.icon"></c-icon>
                    </Button>

                    <DropdownMenu style="width: 200px;" slot="list">
                        <DropdownItem :name="item.children[0].name" :key="'d' + index">
                            <span style="padding-left:10px;">{{ itemTitle(item.children[0]) }}</span>
                        </DropdownItem>
                    </DropdownMenu>

                </Dropdown>

            </div>
        </template>
    </div>
</template>

<script>
export default {
  name: 'sidebarMenuShrink',
  props: {
    menuList: {
      type: Array
    },
    iconColor: {
      type: String,
      default: 'white'
    },
    menuTheme: {
      type: String,
      default: 'darck'
    }
  },
  data () {
    return {
      activeRoute: ''
    }
  },
  methods: {
    changeMenu (active) {
      this.$emit('on-change', active)
    },
    itemTitle (item) {
      if (typeof item.title === 'object') {
        return this.$t(item.title.i18n)
      } else {
        return item.title
      }
    },
    getIconName (menuItem, activeRoute) {
      // 选中的菜单为蓝色图标
      const matched = menuItem.children.some(item => {
        return item.name === activeRoute
      })
      // const matched = menuItem.children.length===1 && menuItem.children[0].name === activeRoute
      return matched ? menuItem.icon : menuItem.icon + '1'
    }
  },
  watch: {
    // 解决刷新页面后菜单不会高亮显示
    '$store.state.app.menuList' (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.activeRoute = this.$route.name === 'tenancy_home-detail' ? 'tenancy_index' : this.$route.name
        })
      }
    },
    $route (newVal) {
      this.activeRoute = newVal.name === 'tenancy_home-detail' ? 'tenancy_index' : newVal.name
    }
  }
}
</script>
